<template>
	<view class="container">
		<empty v-if="errorFlag === true" text="该订单不可评价"></empty>
		<view class="goods-section base-style" v-if="errorFlag === false">
			<!-- 商品列表 -->
			<view class="g-item">
				<image :src="goodsInfo.logo"></image>
				<view class="right">
					<text class="title clamp">{{ goodsInfo.goods_name }}</text>
					<text class="spec">{{ goodsInfo.rule.split('※').join(' ') }}</text>
					<view class="price-box">
						<text class="price">￥ {{ goodsInfo.price }}</text>
						<text class="number">x {{ goodsInfo.cart_num }}</text>
					</view>
				</view>
			</view>
			<view class="appraise-section base-style" v-if="goodsInfo.user_comments == 1">
				<view class="section-title">评价商品</view>
				<view class="appraise-type">
					<text class="type-label">评价类型</text>
					<radio-group @change="handleChange" class="radio-group">
						<label class="radio-item" key="1">
							<radio value="1" checked color="#e93323"/>
							<text class="radio-text good">好评</text>
						</label>
						<label class="radio-item" key="2">
							<radio value="2" color="#e93323"/>
							<text class="radio-text normal">中评</text>
						</label>
						<label class="radio-item" key="3">
							<radio value="3" color="#e93323"/>
							<text class="radio-text bad">差评</text>
						</label>
					</radio-group>
				</view>
				<view class="rate-section">
					<text class="rate-label">描述符合度</text>
					<uni-rate v-model="form.desc_match" color="#ddd" active-color="#e93323" />
				</view>
				<view class="comment-section">
					<textarea
						class="comment-input"
						placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧"
						placeholder-class="placeholder"
						v-model="form.content"
						maxlength="500"
					/>
					<text class="char-count">{{ form.content.length }}/500</text>
				</view>
				<view class="image-section">
					<uni-file-picker
						fileMediatype="image"
						limit="3"
						@delete="deleteFile"
						@select="selectFile"
						title="最多选择3张图片"
						class="file-picker"
					></uni-file-picker>
				</view>
				<button class="submit-btn" @click="doAppraise">立即评价</button>
			</view>
			
			<view class="appraise-section base-style" v-if="goodsInfo.user_comments == 2 && goodsInfo.comment">
				<view class="section-title">我的评价</view>
				<view class="appraise-type">
					<text class="type-label">评价类型</text>
					<view class="type-tag">
						<uni-tag text="好评" type="success" v-if="goodsInfo.comment.type == 1"></uni-tag>
						<uni-tag text="中评" type="primary" v-if="goodsInfo.comment.type == 2"></uni-tag>
						<uni-tag text="差评" type="default" v-if="goodsInfo.comment.type == 3"></uni-tag>
					</view>
				</view>
				<view class="rate-section">
					<text class="rate-label">描述符合度</text>
					<uni-rate v-model="goodsInfo.comment.desc_match" color="#ddd" active-color="#e93323" :readonly="true"/>
				</view>
				<view class="comment-display">
					<text class="comment-label">评价内容</text>
					<text class="comment-content">{{ goodsInfo.comment.content }}</text>
				</view>
				<view class="comment-images" v-if="appraisePic.length > 0">
					<text class="images-label">评价图片</text>
					<view class="images-grid">
						<view class="image-item" v-for="item,index in appraisePic" :key="index" @click="showBig(item)">
							<image :src="item" class="comment-image" mode="aspectFill"/>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-comment base-style" v-if="goodsInfo.user_comments == 2 && !goodsInfo.comment">
				<text class="empty-text">评论已被删除</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	import empty from "@/components/empty";
	
	export default {
		components: {
			empty
		},
		data() {
			return {
				goodsInfo: {
					rule: ''
				},
				orderId: 0,
				orderDetailId: 0,
				form: {
					order_id: 0,
					order_detail_id: 0,
					pictures: [],
					type: 1,
					desc_match: 5,
					content: ''
				},
				appraisePic: [],
				errorFlag: false,
				pictures: new Map(),
				fileUploadEnd: true
			}
		},
		onLoad(options) {
			this.orderId = options.order_id
			this.orderDetailId = options.order_detail_id
			this.form.order_id = this.orderId
			this.form.order_detail_id = this.orderDetailId
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			// 获取订单信息
			async getInfo() {
				let res = await this.$api.userOrder.appraise.get({order_id: this.orderId, order_detail_id: this.orderDetailId})
				this.goodsInfo = res.data.info
	
				if (this.goodsInfo.comment) {
					this.appraisePic = this.goodsInfo.comment.pictures ? this.goodsInfo.comment.pictures.split(',') : []
				}
			},
			deleteFile(file) {
				this.pictures.delete(file.tempFilePath)
			},
			// 选择文件
			selectFile(file) {
				this.fileUploadEnd = false
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: BASE_URL + '/api/Common/uploadFile',
					filePath: file.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						setTimeout(() => {
							uni.hideLoading();
						}, 2000);
						let resFile = JSON.parse(res.data)
						this.pictures.set(file.tempFilePaths[0], resFile.data.url)
						this.fileUploadEnd = true
						this.$tool.msg('上传成功')
					}
				});
			},
			// 单选按钮选择
			handleChange(val) {
				this.form.type = val.detail.value;
			},
			// 提交评价
			async doAppraise() {
				if (!this.fileUploadEnd) {
					this.$tool.msg('图片尚未传输完成，请稍后')
					return false
				}
				
				let imgMap = []
				for (let [k, v] of this.pictures) {
					imgMap.push(v)
				}
				this.form.pictures = imgMap.join(',')
				
				let res = await this.$api.userOrder.doAppraise.post(this.form)
				if (res.code == 0) {
					this.$tool.msg(res.msg);
					setTimeout(() => {
						this.getInfo()
					}, 800)
				} else {
					this.$tool.msg(res.msg);
				}
			},
			// 大图
			showBig(pic) {
				uni.previewImage({
					urls: [pic]
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #f5f5f5;
		padding-bottom: 120upx;
	}
	
	.container {
		background: #f5f5f5;
		min-height: 100vh;
	}
	
	.base-style {
		border-radius: 16upx;
		margin: 20upx 24upx;
		background: #fff;
		overflow: hidden;
		box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}
	
	.goods-section {
		.g-item {
			display: flex;
			margin: 24upx 30upx;
			padding: 20upx;
			background: #fafafa;
			border-radius: 12upx;
			transition: all 0.3s ease;
			border: 1px solid #f0f0f0;
	
			&:active {
				transform: scale(0.98);
				background: #f5f5f5;
			}
	
			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
				transition: transform 0.3s ease;
				
				&:active {
					transform: scale(0.95);
				}
			}
	
			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
	
			.title {
				font-size: 30upx;
				color: #303133;
				font-weight: 500;
				line-height: 1.4;
			}
	
			.spec {
				color: #909399;
				font-size: 24upx;
				margin-top: 8upx;
				background: #f0f0f0;
				padding: 4upx 8upx;
				border-radius: 4upx;
				display: inline-block;
			}
	
			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				color: #303133;
				padding-top: 16upx;
	
				.price {
					font-weight: 600;
					color: #e93323;
					font-size: 34upx;
				}
				
				.number {
					font-size: 26upx;
					color: #909399;
					background: #f0f0f0;
					padding: 4upx 12upx;
					border-radius: 12upx;
				}
			}
		}
	}
	
	.appraise-section {
		margin-top: 20upx;
		
		.section-title {
			font-size: 32upx;
			font-weight: 600;
			color: #303133;
			padding: 24upx 30upx 16upx;
		}
		
		.appraise-type {
			padding: 20upx 30upx;
			border-bottom: 1px solid #f8f8f8;
			
			.type-label {
				font-size: 28upx;
				color: #606266;
				font-weight: 500;
				margin-bottom: 16upx;
				display: block;
			}
			
			.radio-group {
				display: flex;
				justify-content: space-between;
				
				.radio-item {
					display: flex;
					align-items: center;
					padding: 16upx 24upx;
					background: #f8f8f8;
					border-radius: 12upx;
					flex: 1;
					margin: 0 8upx;
					transition: all 0.3s ease;
					
					&:first-child {
						margin-left: 0;
					}
					
					&:last-child {
						margin-right: 0;
					}
					
					&:active {
						transform: scale(0.98);
						background: #f0f0f0;
					}
					
					radio {
						transform: scale(0.8);
						margin-right: 8upx;
					}
					
					.radio-text {
						font-size: 28upx;
						font-weight: 500;
						
						&.good {
							color: #67c23a;
						}
						
						&.normal {
							color: #409eff;
						}
						
						&.bad {
							color: #f56c6c;
						}
					}
				}
			}
			
			.type-tag {
				margin-top: 8upx;
			}
		}
		
		.rate-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 30upx;
			border-bottom: 1px solid #f8f8f8;
			
			.rate-label {
				font-size: 28upx;
				color: #606266;
				font-weight: 500;
			}
		}
		
		.comment-section {
			padding: 20upx 30upx;
			border-bottom: 1px solid #f8f8f8;
			position: relative;
			
			.comment-input {
				width: 100%;
				min-height: 200upx;
				padding: 16upx;
				background: #f8f8f8;
				border-radius: 12upx;
				font-size: 28upx;
				color: #303133;
				line-height: 1.5;
				border: 1px solid #f0f0f0;
				transition: all 0.3s ease;
				
				&:focus {
					background: #fff;
					border-color: #e93323;
				}
			}
			
			.placeholder {
				color: #c0c4cc;
				font-size: 26upx;
			}
			
			.char-count {
				position: absolute;
				right: 40upx;
				bottom: 30upx;
				font-size: 24upx;
				color: #c0c4cc;
			}
		}
		
		.image-section {
			padding: 20upx 30upx;
			
			.file-picker {
				.uni-file-picker {
					width: 100%;
					margin: 0;
				}
				
				.uni-file-picker__header {
					width: 100%;
				}
				
				.file-picker__box {
					width: 160upx !important;
					height: 160upx !important;
					padding-top: 0 !important;
					border-radius: 8upx;
					border: 2upx dashed #ddd;
					background: #f8f8f8;
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.98);
						background: #f0f0f0;
					}
				}
				
				.icon-add {
					width: 40upx !important;
					height: 40upx !important;
				}
				
				.icon-del-box {
					width: 30upx !important;
					height: 30upx !important;
					background: rgba(0, 0, 0, 0.5) !important;
					border-radius: 50% !important;
				}
				
				.icon-del {
					width: 16upx !important;
					height: 16upx !important;
				}
			}
		}
		
		.submit-btn {
			width: 90% !important;
			height: 80upx !important;
			line-height: 80upx !important;
			background: linear-gradient(135deg, #ff6b6b, #e93323) !important;
			color: #fff !important;
			font-size: 32upx !important;
			font-weight: 500 !important;
			border-radius: 40upx !important;
			margin: 40upx auto 30upx !important;
			letter-spacing: 2upx !important;
			transition: all 0.3s ease !important;
			border: none !important;
			
			&:active {
				transform: scale(0.98) !important;
				opacity: 0.9 !important;
			}
		}
		
		.comment-display {
			padding: 20upx 30upx;
			border-bottom: 1px solid #f8f8f8;
			
			.comment-label {
				font-size: 28upx;
				color: #606266;
				font-weight: 500;
				margin-bottom: 12upx;
				display: block;
			}
			
			.comment-content {
				font-size: 28upx;
				color: #303133;
				line-height: 1.6;
				background: #f8f8f8;
				padding: 16upx;
				border-radius: 8upx;
				border: 1px solid #f0f0f0;
			}
		}
		
		.comment-images {
			padding: 20upx 30upx;
			
			.images-label {
				font-size: 28upx;
				color: #606266;
				font-weight: 500;
				margin-bottom: 16upx;
				display: block;
			}
			
			.images-grid {
				display: flex;
				flex-wrap: wrap;
				gap: 16upx;
				
				.image-item {
					width: 160upx;
					height: 160upx;
					border-radius: 8upx;
					overflow: hidden;
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.95);
					}
					
					.comment-image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.empty-comment {
		margin-top: 20upx;
		text-align: center;
		padding: 60upx 0;
		
		.empty-text {
			font-size: 28upx;
			color: #909399;
		}
	}
</style>